<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let observer={
        list:{},
        lister(key,fn){
            if(!this.list[key]){
                this.list[key]=[]
            }
            this.list[key].push(fn)
        },
        trigger(key,value){
            for(var i=0;i<this.list[key].length;i++){
                var fn=this.list[key][i++]
                fn(key,value)
            }            
        },
        remove(key,index){
            if(!this.list[key]){
                console.log('没有该方法');
                return;
            }
            if(!index){
                delete this.list[key];
            }else{
                this.list[key].splice(index,1)
            }
        }
    }
    let init=function(obj){
        for(var item in observer){
            obj[item]=observer[item]
        }
    }
    let child={};
    init(child)
    child.lister('key1',function(key,value){
        console.log([key,value])
    })
    child.lister('key2',function(key,value){
        console.log([key,value])
    })
    child.lister('key2',function(key,value){
        console.log([key,value])
    })
    child.trigger('key1',20)
    child.trigger('key2',20)
    child.trigger('key2',20)
    child.trigger('key2',20)
    child.remove('key2',1)
</script>
</html>